<template>
  <div class='move-tabs'>
    <div class='tabs-wrapper' ref='tabsWrapper'>
      <div ref='tab'>
        <div v-for='(item, index) in tabs' :key='index'>
          <div class='tab-item'>
            <div class='expand-block'>
              {{item.name||'无'}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: "Gundong",
  components: {},
  data() {
    return {
      tabs: [
        {name:'北京'},
        {name:'上海'},
        {name:'杭州'},
        {name:'广州'},
        {name:'郑州'},
        {name:'深圳'},
        {name:'合肥'},
        {name:'徐州'},
        {name:'西安'},
        {name:'石家庄'},
        {name:'呼和浩特'},
        {name:'兰州'},
        {name:'包头'},
        {name:'重庆'},
      ],
      mX: 0,
      tabWidth: 300,
    };
  },
  computed: {},
  created() {
  },
  mounted() {
    this._initMenu();
  },
  methods: {
    _initMenu() {
      const tabsWidth = this.tabWidth
      const width = this.tabs.length * tabsWidth
      this.$refs.tab.style.width = `${width}px`
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.tabsWrapper, {
            scrollX: true,
            eventPassthrough: 'vertical',
          })
        } else {
          this.scroll.refresh()
        }
      })
    },
  },
};
</script>

<style scoped lang="scss">
.move-tabs {
  position: relative;
  top: 0;
  bottom: 0;
  width: 100%;
}
.tabs-wrapper {
  height: 120px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
}
.tab-item {
  float: left;
  width: 280px;
  height: 120px;
  padding: 10px;
  margin-right: 20px;
  background: #f5f5;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
.expand-block {
  font-size: 30px;
  font-weight: bold;
  color: #333333;
}
</style>
